import { useState, useMemo } from "react"

const Child1 = () => {
  console.log('1111')
  return (
    <div> child1 </div>
  )
}

const Child2 = () => {
  console.log('2222')
  return (
    <div> child2 </div>
  )
}

const App = () => {
  const [ a, setA ] = useState(11)
  const [ b, setB ] = useState(22)

  const addA = () => {
    setA(a + 1)
  }
  const addB = () => {
    setB(b + 1)
  }

  // useMemo 之后  只有依赖项发生改变对应的组件才会重新渲染
  const myChild1 = useMemo(() => <Child1 a = { a }/>, [a])
  const myChild2 = useMemo(() => <Child2 b = { b }/>, [b])

  return (
    <>
      <button onClick = { addA }>add a</button>
      <button onClick = { addB }>add b</button>
      { myChild1 }
      { myChild2 }
    </>
  )
}

export default App